<template>
  <Page class="loading-test-page">
    <h1>测试 Loading 组件</h1>

    <!-- 测试按钮 -->
    <div class="test-section">
      <h2>1. 按钮上的 Loading</h2>
      <el-button ref="buttonRef" @click="testButtonLoading">点击按钮开始测试loading</el-button>
    </div>

    <div class="test-section">
      <h2>2. 圆形区域上的 Loading</h2>
      <div ref="circleRef" class="test-circle" @click="testCircleLoading"></div>
    </div>

    <div class="test-section">
      <h2>3. 长方形区域上的 Loading</h2>
      <div ref="rectangleRef" class="test-rectangle" @click="testRectangleLoading"></div>
    </div>

    <div class="test-section">
      <h2>4. 图片上的 Loading</h2>

      <div ref="imageRef" class="test-image" @click="testImageLoading">
        <img src="./p1.png" class="test-image" alt="测试图片" />
      </div>
      <h5>
        注意：因为img元素的渲染机制中img是一个闭合标签，其内的子元素不会渲染，所以需要在img外套一层div，确保loading的正常渲染
      </h5>
    </div>

    <div class="test-section">
      <h2>5. 复杂布局中的 Loading</h2>
      <div ref="complexRef" class="test-complex" @click="testComplexLoading">
        <div class="inner-box"></div>
      </div>
    </div>
  </Page>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import Page from '@/components/page/index'
// 获取当前实例
const { proxy } = getCurrentInstance()

// 定义 Refs
const buttonRef = ref(null)
const circleRef = ref(null)
const rectangleRef = ref(null)
const imageRef = ref(null)
const complexRef = ref(null)

/**
 * 测试按钮上的 Loading
 */
function testButtonLoading() {
  if (buttonRef.value) {
    proxy.$loading.show(buttonRef.value)
    setTimeout(() => {
      proxy.$loading.hide(buttonRef.value)
    }, 2000)
  }
}

/**
 * 测试圆形区域上的 Loading
 */
function testCircleLoading() {
  if (circleRef.value) {
    proxy.$loading.show(circleRef.value)
    setTimeout(() => {
      proxy.$loading.hide(circleRef.value)
    }, 2000)
  }
}

/**
 * 测试长方形区域上的 Loading
 */
function testRectangleLoading() {
  if (rectangleRef.value) {
    proxy.$loading.show(rectangleRef.value)
    setTimeout(() => {
      proxy.$loading.hide(rectangleRef.value)
    }, 2000)
  }
}

/**
 * 测试图片上的 Loading
 */
function testImageLoading() {
  if (imageRef.value) {
    proxy.$loading.show(imageRef.value)
    setTimeout(() => {
      proxy.$loading.hide(imageRef.value)
    }, 2000)
  }
}

/**
 * 测试复杂布局中的 Loading
 */
function testComplexLoading() {
  if (complexRef.value) {
    proxy.$loading.show(complexRef.value)
    setTimeout(() => {
      proxy.$loading.hide(complexRef.value)
    }, 2000)
  }
}
</script>

<style scoped>
.loading-test-page {
  background-color: #ddd;
}

.test-section {
  width: 200px;
  margin-bottom: 30px;
}

.test-circle {
  width: 150px;
  height: 150px;
  background-color: #ffcccb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #f08080;
}

.test-rectangle {
  width: 300px;
  height: 100px;
  background-color: #add8e6;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #87ceeb;
}

.test-image {
  width: 200px;
  height: 200px;
  cursor: pointer;
  border: 2px solid #ccc;
}

.test-complex {
  width: 300px;
  height: 200px;
  background-color: #d3d3d3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #a9a9a9;
}

.test-complex .inner-box {
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
  border: 2px solid #000;
}

.test-complex p {
  z-index: 1;
  position: relative;
}

.test-results pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  max-height: 300px;
  overflow-y: auto;
}
</style>